
<template>
  <div class="taikongsha base-background-img">
    <ul class="ul-item-content">
      <li class="li-item-content" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="swiper(item)">
        <img :src="item.img" alt="">
      </li>
    </ul>
    <div class="content">
        <div class="img5" @click="swiper(img5)">
            <img src="static/robot/7/5.png">
        </div>
        <div class="img6" @click="swiper(img6)">
            <img src="static/robot/7/6.png">
        </div>
        <div class="img7" @click="swiper(img7)">
            <img src="static/robot/7/7.png">
        </div>
        <div class="img8" @click="swiper(img8)">
            <img src="static/robot/7/8.png">
        </div>
        <div class="img9" @click="swiper(img9)">
            <img src="static/robot/7/9.png">
        </div>
        <div class="img10" @click="swiper(img10)">
            <img src="static/robot/7/10.png">
        </div>
        <div class="img11" @click="swiper(img11)">
            <img src="static/robot/7/11.png">
        </div>
    </div>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  import STATICPATH from '../../config.js'
  export default {
    name: 'taikongsha',
    data () {
      return {
        isshowpdf: false,
        ishsowvideo: false,
        info: '',
        infourl: '',
        img5: {
          url: 'static/robot/pdf/2/【课程讲义】——奔走的小熊.pdf',
          data: [{
            isSelected: 1,
            name: '奔走的小熊—《动物模仿歌》',
            url: STATICPATH + '/robot/2/纸粘土/dongwumofangge.mp4'
          }]
        },
        img6: {
          url: 'static/robot/pdf/2/【课程讲义】——回力恐龙车.pdf',
          data: []
        },
        img7: {
          url: 'static/robot/pdf/2/【课程讲义】——水果盘.pdf',
          data: [{
            isSelected: 1,
            name: '水果盘—《水果歌》',
            url: STATICPATH + '/robot/2/纸粘土/shuiguoge.mp4'
          }]
        },
        img8: {
          url: 'static/robot/pdf/2/【课程讲义】——创意大集合2.pdf',
          data: []
        },
        img9: {
          url: 'static/robot/pdf/3/【课程讲义】——音乐盒.pdf',
          data: [{
            isSelected: 1,
            name: '音乐盒—《小孩小孩会唱歌》',
            url: STATICPATH + '/robot/3/纸粘土/xiaohaixiaohaihuichangge.mp4'
          }]
        },
        img10: {
          url: 'static/robot/pdf/3/【课程讲义】——魔法森林.pdf',
          data: [{
            isSelected: 1,
            name: '魔法森林—《我有一双小小手》',
            url: STATICPATH + '/robot/3/纸粘土/woyouyishuangxiaoxiaoshou.mp4'
          }]
        },
        img11: {
          url: 'static/robot/pdf/3/【课程讲义】——小小发明家2.pdf',
          data: [{
            isSelected: 1,
            name: '小小发明家（2）——小动物',
            url: STATICPATH + '/robot/3/纸粘土/xiaodongwu.mp4'
          }]
        },
        tabs: [{
          img: 'static/robot/7/1.png',
          url: 'static/robot/pdf/1/【课程讲义】——苹果小实验.pdf',
          data: [{
            isSelected: 1,
            name: '《拍手跺脚真快乐》',
            url: STATICPATH + '/robot/1/纸粘土/zhenkuaile.mp4'
          }]
        },
        {
          img: 'static/robot/7/2.png'
        },
        {
          img: 'static/robot/7/3.png'
        },
        {
          img: 'static/robot/7/4.png'
        }]
      }
    },
    methods: {
      swiper: function (item) {
        console.log(item)
        this.info = item.data
        this.pdfurl = item.url
        this.isshowpdf = true
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.taikongsha > div {
  position: absolute; 
}
.ul-item-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 10;
  top: 260px;
  left: 100px;
  width: 1090px;
  height: 100px;
  position: absolute;
}
.li-item-content {
  cursor: pointer;
  float: left;
  margin: 15px 6px;
  position: initial;
}
.content{
    position: absolute;
    width:1090px;
    height:250px;
    top:330px;
    left:100px;
}
.img5,.img6,.img7,.img8,.img9,.img10,.img11{
  position: absolute;
  z-index: 100;
}
.img5{
    left:100px;
    top:65px;
}
.img6{
    left:400px;
    top:65px;
}
.img7{
    left:700px;
    top:65px;
}
.img8{
    left:10px;
    top:180px;
}
.img9{
    left:280px;
    top:180px;
}
.img10{
    left:550px;
    top:180px;
}
.img11{
    left:820px;
    top:180px;
}
</style>
